<template>
    <div>
        <div>
            <mt-button v-for="(elem,i) of kind" :key="i" v-text="elem" @click="move(i+1)"></mt-button>
        </div>
        <div>
            <mt-tab-container v-model="active">
                <mt-tab-container-item id="tab1">美食区域</mt-tab-container-item>
                <mt-tab-container-item id="tab2">饰品区域</mt-tab-container-item>
                <mt-tab-container-item id="tab3">休闲区域</mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            kind:["美食","饰品","休闲"],
            active:"tab1"
        }
    },
    methods:{
        move(i){
            this.active = "tab" + i;
        }
    }
}
</script>

<style>

</style>